<template>
    <!-- 房间列表组件 -->
    <div class="houseListContent">
        <div class="title">
            <h4>热门精选</h4>
        </div>
        <div class="houseItem">

            <template v-for="item in HouseList" :key="item.data.houseId">

                <houseListV9 @click="itemClick(item.data)" v-if="item.discoveryContentType === 9"
                    :House-data="item.data">
                </houseListV9>
                <houseListV3 @click="itemClick(item.data)" v-else-if="item.discoveryContentType === 3"
                    :House-data="item.data"></houseListV3>

            </template>

        </div>

    </div>
</template>

<script setup>
import useHomeStore from '@/stores/modules/homeStore';
import houseListV9 from '@/components/home/houseList-v9.vue';
import houseListV3 from '@/components/home/houseList-v3.vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';


/* 房间列表数据 */
const HomeStore = useHomeStore()

const { HouseList } = storeToRefs(HomeStore);

const router = useRouter()
const itemClick = (item) => {
    // 跳转到Detail页面
    router.push("/detail/" + item.houseId)
}
console.log('houseListContent!!!!', HouseList.value);
</script>

<style lang="less" scoped>
.houseListContent {
    background-color: rgba(245, 245, 245, 0.749);


    .title {
        font-size: 18px;
        line-height: 40px;
        width: 72px;
        height: 40px;
        color: #333333;
        padding: 4px 0 4px 10px;
        background: url(@/assets/img/bg.png) no-repeat;
        background-size: 50% 50%;
        background-position-y: 6px;
        background-position-x: 20px;
    }

    .houseItem {
        display: flex;
        flex-wrap: wrap;
    }
}
</style>